
<!--<link rel="stylesheet" href="./div.css">-->
<!--<link rel="stylesheet" href="../files/styles/map.css">-->
<style>
    .centerDiv {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        /*background: #eee;*/
    }

    .desert1 {
        background-image: url('./imgs/tile-desert-1.png');
        /*background-size: cover;*/
        /*background-size: contain;*/
    }

    .desert2 {
        background-image: url('./imgs/tile-desert-2.png');
        /*background-size: cover;*/
        /*background-size: contain;*/
    }

</style>

<!--<div class="centerDiv desert1" onclick="switch_bg(this)"> Hello! </div>
<script>
    function switch_bg(e) {
        e.classList.toggle('desert2')
    }
</script>-->

<div class="centerDiv desert2" onclick="switch_bg(this)"> Hello! </div>

<script>
    function switch_bg(e) {
        e.classList.toggle('desert1')
    }
</script>

<script>
    // function switch_bg(e) {
    //     const options = ['player', 'desert']
    //     // e.classList[0] = 'xxx'
    //     let idx_new = e.classList.contains(options[0]) ? 1 : 0
    //     let idx_pre = (idx_new + 1) % 2
    //     e.classList.replace(options[idx_pre], options[idx_new])
    // }
    // function switch_bg(e) {
    //     ['player', 'desert'].forEach(style => e.classList.toggle(style))
    // }
</script>
